<template>
  <!-- 最开始的遮盖层 -->
  <van-overlay :show="loading" z-index="999">
    <div class="wrapper" @click.stop>
      <div class="block">
        <indexLoading></indexLoading>
      </div>
    </div>
  </van-overlay>
  <!-- 搜索栏 -->
  <div class="con">
    <div class="search">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @click="go"
      >
        <template #action>
          <van-icon name="chat-o" />
        </template>
      </van-search>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in HomeInfo.imgData"
          ><img :src="item.img" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 分类列表 -->
    <div class="prodList">
      <div
        :border="false"
        :column-num="5"
        class="zs"
        v-for="item in HomeInfo.cateData"
      >
        <div>
          <img :src="item.icon" />
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="notice">
      <div class="no-one"><img src="../../imags/fenlei.png" alt="" /></div>

      <van-notice-bar :scrollable="false">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :touchable="false"
          :show-indicators="false"
        >
          <div v-for="item in HomeInfo.noticeData">
            <van-swipe-item>{{ item.title }}</van-swipe-item>
          </div>
        </van-swipe>
      </van-notice-bar>

      <div class="on-three"><img src="../../imags/fenlei.png" alt="" /></div>
    </div>
    <div>
      <img :src="HomeInfo.adImg.adImage" style="width: 100%" alt="" />
    </div>
    <div class="new">
      <van-cell title="新品上市" is-link value="更多" />
    </div>
    <div class="ad" style="position: relative">
      <div
        v-for="item in HomeInfo.getImg"
        style="position: absolute; display: block"
        :style="{
          width: `${item.width}px`,
          height: `${item.height}px`,
          left: `${item.left}px`,
          top: `${item.top}px`,
          bottom: `${item.bottom}px`,
        }"
      >
        <img
          :src="item.img"
          alt=""
          style="position: absolute; width: 100%; height: 100%"
        />
        <!-- <div>{{ item.name }}</div> -->
      </div>
    </div>
  </div>
  <van-cell title="热销产品" is-link value="更多" to="/detaList" />
  <van-swipe
    class="my-swipe good"
    :width="150"
    :height="160"
    indicator-color="white"
    :loop="false"
  >
    <van-swipe-item class="swipe" v-for="item in HomeInfo.getGoodsList">
      <div style="text-align: center">
        <img style="border-radius: 10px" :src="item.goods_thumb" alt="" />
        <div
          style="
            width: 130px;
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 显示省略号 */
            white-space: nowrap; /* 不换行 */
            margin: 0 auto;
          "
        >
          {{ item.name }}
          <div style="display: flex; align-items: center">
            <div class="goodsPrice" style="color: #fc6217">
              <span>￥</span>{{ item.price / "100" }}
            </div>
            <del
              ><span style="color: #888888">{{
                item.market_price / "100"
              }}</span></del
            >
          </div>
        </div>
      </div>
    </van-swipe-item>
  </van-swipe>
  <div style="text-align: center">为你推荐</div>
  <div class="goodsList">
    <div class="goodsItem" v-for="item in HomeInfo.getGoodsList">
      <img :src="item.goods_thumb" alt="" />
      <div
        style="
          width: 100%;
          overflow: hidden; /* 隐藏溢出内容 */
          text-overflow: ellipsis; /* 显示省略号 */
          white-space: nowrap; /* 不换行 */
        "
      >
        {{ item.name }}
      </div>
      <div style="display: flex; align-items: center">
        <div class="goodsPrice" style="color: #fc6217">
          <span>￥</span>{{ item.price / "100" }}
        </div>
        <del
          ><span style="color: #888888">{{
            item.market_price / "100"
          }}</span></del
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, toRefs, reactive } from "vue";
import userUserStore from "@/stores/user";
import {
  getCategoryIndexShow,
  getBannerList,
  getBannerIndexNotice,
  getAd,
  getGoodsList,
  getGoodsInfo,
} from "@/api/index.js";
import indexLoading from "@/icon/indexLoadingView.vue";
import { showToast } from "vant";

import { useRouter } from "vue-router";
const router = useRouter();

const { isLogin } = toRefs(userUserStore());
const value = ref("");
const onSearch = (val) => showToast(val);
const onClickButton = () => showToast(value.value);
const loading = ref(true);

const go = () => {
  router.push({
    name: "search",
  });
};

const HomeInfo = reactive({
  cateData: [],
  imgData: [],
  noticeData: [],
  adImg: [],
  getImg: [],
  getGoodsList: [],
});
function init() {
  Promise.all([
    getCategoryIndexShow(),
    getBannerList(),
    getBannerIndexNotice(),
    getAd(),
    getGoodsList(),
    getGoodsInfo(),
  ]).then((res) => {
    console.log(res);

    let [cateRes, bannerRes, noticeRes, goryRes, getGoodsList] = res;
    if (cateRes.code == 0) {
      HomeInfo.cateData = cateRes.category;
    } else {
    }
    if (bannerRes.code == 0) {
      HomeInfo.imgData = bannerRes.rows;
    } else {
    }

    if (noticeRes.code == 0) {
      HomeInfo.noticeData = noticeRes.rows;
    } else {
    }
    if (goryRes.code == 0) {
      HomeInfo.getImg = goryRes.list[0].data.list;
      HomeInfo.adImg = goryRes.list[0].data;
      // console.log(HomeInfo.adImg);
    } else {
    }
    // console.log(HomeInfo);
    // console.log(HomeInfo.getImg);
    loading.value = false;
    // console.log(loading.value);
    if (getGoodsList.code == 0) {
      HomeInfo.getGoodsList = getGoodsList.rows;
      // console.log(HomeInfo.adImg);
      console.log(HomeInfo.getGoodsList);
    } else {
    }
  });
}
function mg() {
  getGoodsList({
    // category_ids: "65f2748ea09a9b12d7ed4f70",
    // is_hot: true,
  }).then((res) => {
    console.log(res);
  });
}
onMounted(() => {
  init();
  mg();
});
</script>
<style>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: white;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 190px;
  text-align: center;
  /* background-color: #39a9ed; */
}

.my-swipe .van-swipe-item img {
  width: 100%;
}

.notice {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.vip img {
  width: 100%;
}

.prodList {
  display: flex;
  flex-wrap: wrap;
}

.prodList img {
  border-radius: 22px;
  width: 45px;
  height: 45px;
}

.zs {
  padding: 10px 8px;
}

.zs > div {
  width: 55px;
  font-size: 11px;
  text-align: center;
}
.banner img {
  height: 121px;
}
.my-swipe .van-swipe-item {
  height: 121px;
  color: black;
  font-size: 12px;
}
.notice .van-swipe-item {
  height: 100%;
}
.ad {
  width: 355px;
  height: 220px;
  margin: 0 auto;
  padding: 0 60px;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.van-notice-bar {
  width: 100px;
}
.goodsList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.goodsList img {
  width: 100%;
  border-radius: 10px;
}
.goodsItem {
  width: 43%;
  margin: 10px 0;
}
.goodsPrice {
  font-size: 20px;
  margin-right: 10px;
}
.goodsPrice span {
  font-size: 14px;
}
.swipe {
  width: 200px;
  color: black;
}
.good .swipe img {
  width: 85px;
  height: 85px;
}
</style>
